<template>
	<view class="scroll-Y">
		<z-paging class="zPagingCircle" ref="paging" @onRefresh="onRefresh" @query="query" v-model="list"
			@scroll="scroll" :empty-view-style="{ 'margin-bottom': '100rpx' }" :loading-more-enabled='!isend'
			:hide-empty-view='isend'>
			<template #top>
				<view class="barTitle" :style="{height: height + 'px', paddingBottom: '20rpx', paddingTop: top + 'px'}">
					{{circleName}}
				</view>
			</template>
			<view class="box">
				<view class="search-box">
					<view class="search">
						<view class="search-input">
							<view class="search-input-icon">
								<image :src="ossUrl + `/static/card/11.png`"></image>
							</view>
							<input type="text" placeholder="鼎圈AI一键搜索好友兴趣" placeholder-class="search-input-ac"
								v-model="params.nickname" @input="reload">
						</view>
						<view class="search-rig" @click="open">
							<image :src="ossUrl + `/static/card/8.png`"></image>
							<image :src="ossUrl + `/static/card/9.png`" mode="" class="search-rig-s"></image>
						</view>
					</view>
					<view class="flex-row circleTabs">
						<view class="circle-item-add" style="margin:0 30rpx;"
							:class="{ 'circle-item-ac': 0 === params.circle_id }" @click="setTab(0)">
							<view class="circle-item-add-icon">
								<view class="circle-item-add-icon-item">
									<uni-icons custom-prefix="iconfont" type="icon-quanbu" size="22"
										color="#ffffff"></uni-icons>
								</view>

							</view>
							<view class="circle-text">全部</view>
							<view class="triangle" :class="{ active: 0 === params.circle_id }"></view>
						</view>
						<view class="circle-item" v-for="it in tab" :key="it.id"
							:style="it.isend?'filter: grayscale(100%)':''"
							:class="{ 'circle-item-ac': it.id === params.circle_id }" @click="setTab(it.id,it)">
							<view class="circle-item-add-icon">
								<image :src="it.logo" mode="aspectFill" class="circle-img" />
							</view>
							<view class="circle-text ellipsis">{{it.name || ''}}</view>
							<view class="triangle" :class="{ active: it.id === params.circle_id }"></view>
						</view>
						<view class="circle-item-add" @click="toFindInterest">
							<view class="circle-item-add-icon">
								<view class="circle-item-add-icon-item">
									<uni-icons custom-prefix="iconfont" type="icon-jiahao" size="17"
										color="#ffffff"></uni-icons>
								</view>
							</view>
							<view class="circle-text">找兴趣</view>
							<view class="triangle"></view>
						</view>
					</view>

					<!--<view style="height: 20rpx; background-color: #f4f5f8;"></view>-->
				</view>
				<!-- 	<view class="tab-top"></view> -->
				<!-- <view class="test">
				asd
			</view> -->
				<view class="tab-box">
					<view class="tab flex-row-between"> </view>
				</view>
				<template v-if="keyword === '' && changeCardList">
					<view class="message"
						v-if="!(Array.isArray(changeCardList.list) && changeCardList.list.length === 0)">
						<view class="message-list">
							<view class="message-list-header">
								<view class="message-list-header-l">
									<image :src="ossUrl + `/static/card/4.png` " mode=""></image>
									名片交换请求
								</view>
								<view class="message-list-header-r" @click="toDetail">
									新请求 <text class="text"><u-badge max="99" :value="changeCardList.count"
											bgColor="#D91515"></u-badge></text>
									<image :src="ossUrl + `/static/card/12.png`" mode=""></image>
								</view>
							</view>
							<view class="message-list-content">
								<image class="message-list-content-avatar" :src="changeCardList.list.head"
									@click.stop="toIndex(changeCardList.list)"></image>
								<view class="message-list-content-r">
									<view class="message-list-content-r-tx">
										<view class="message-list-content-r-name">{{changeCardList.list.nickname || ''}}
										</view>
										<view class="message-list-content-r-tx-subTitle">
											{{changeCardList.list.identity || ''}}
										</view>
										<view class="message-list-content-r-tx-address">
											{{changeCardList.list.address || ''}}
										</view>
									</view>
									<view class="message-list-content-r-btns">
										<view class="message-list-content-r-btns-agree"
											@click="agree(changeCardList.list.friend_id)">同意</view>
										<view class="message-list-content-r-btns-rej"
											@click="delCard(changeCardList.list.friend_id,1)">拒绝</view>
									</view>
								</view>
							</view>
							<view class="message-list-comment">
								<image :src="ossUrl + `/static/card/7.png`" mode=""></image>
								<view>
									<view class="message-list-comment-item message-list-comment-r">
										<text>对方发起的名片交换</text>
									</view>
									<view class="message-list-comment-item ">
										<text>来源：{{changeCardList.list.share}}</text>
										<text>{{changeCardList.add_time}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
					<!-- <view class="title">所有名片</view> -->
				</template>
				<!-- 所有名片 -->
				<block v-if="!isend">
					<view class="list" v-if="list.length > 0">
						<view class="list-item" v-for="it in list" :key="it.id">
							<view class="update" v-if="it.whether_update==1">有更新</view>
							<u-swipe-action>
								<u-swipe-action-item :options="options" :threshold='60' @click="swipeDction"
									:name="it.friend_id">
									<view class="list_item">

										<view class="list_item-img" @click.stop="toIndex(it)">
											<!-- <view class="g-quanzhu">
											<view class="g-quanzhu-content">
												<image class="g-quanzhu-img" :src="it.head" @click.stop="toIndex(it)"></image>
											</view>
											<image class="g-quanzhu-img-top" :src="ossUrl + '/static/image/gl1.png'"
												@click.stop="toIndex(it)"></image>
										</view> -->
											<identityAvatarVue :identity="it.circle_host" :avatar="it.head" />
										</view>
										<view class="list_item-content" @click.stop="toIndex(it)">
											<view class="list_item-content-h">
												<view class="list_item-content-h-name">
													{{ it.nickname }}
													<image
														:src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`"
														mode="">
													</image>
													<image :src="ossUrl + '/static/image/vip/2.png'" mode=""
														v-if="it.vip === 1"
														style="margin-left: 10rpx;margin-top: 2rpx;">
													</image>
													<image :src="u" mode=""
														style="border-radius: 50%;margin-left: 10rpx;margin-top: 2rpx;"
														v-for="u in it.Icon"></image>
												</view>
											</view>



											<view class="list_item-content-tq">
												同趣：
												<view class="list_item-content-bg">
													<block
														v-if="Array.isArray(it.common_circles) && it.common_circles.length > 0">
														<image :src="u.icon" mode="widthFix"
															:style="'left:'+x*38+'rpx;'"
															v-for="(u,x) in it.common_circles.slice(0, 6)"></image>
														<image
															v-if="Array.isArray(it.common_circles) && it.common_circles.length >= 7"
															src="ossUrl + `/static/mpre.png`" mode="widthFix"
															:style="'left:'+6*38+'rpx;background:#fff'"></image>
													</block>



													<block v-else>暂无同兴趣</block>
												</view>

											</view>
											<view class="list_item-content-subTitle">
												{{ it.name || '' }}
												<text v-if="it.count > 0">最近访问了你{{ it.count }}次</text>
											</view>
											<view class="list_item-content-address">{{ it.company || '' }}</view>
											<view class="list_item-content-address">
												<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
												<text style="color: #7a7a7a;">{{ it.address || '' }}</text>
											</view>
										</view>
										<view class="list_item-rig">
											<view style="margin-right: 40rpx;" @click.stop="toCircle(it)">
												<image :src="ossUrl + `/static/card/13.png`"></image>
												探圈
											</view>
											<view @click.stop="sendMessage(it.id)">
												<image :src="ossUrl + `/static/card/10.png`"></image>
												私信
												<view class="layout-item-nums" v-if="it.massage_count > 0">
													<u-badge bgColor="#e4393c" max="99"
														:value="it.massage_count"></u-badge>
												</view>
											</view>
										</view>
									</view>
								</u-swipe-action-item>
							</u-swipe-action>
							<view class="gap"></view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="" style="padding-top: 60rpx;">
						<u-empty mode="permission" text="您的圈子已到期">
						</u-empty>
						<view v-if="circle_host==1" class="xfbox"><u-button @click="xufei" color="#12B475"
								iconColor='#12B475' text=" 立即续费" size="normal" type="success"></u-button></view>
					</view>
				</block>

			</view>


		</z-paging>
		<Search ref="SearchRef" :searchInfo="searchInfo" @submit="submit" :circle_id="params.circle_id" />
		<!-- 占位 -->
		<!--<u-gap height="80"></u-gap>-->
	</view>
</template>

<script>
	import Search from './components/search.vue'
	import {
		InformationAllBusinessCards,
		InformationAllExchangeRequest,
		InformationAllBusinessCardsAgree,
		whether_update_read,
		InformationAllBusinessCardsDel,
		InformationScreen,
		user_circle,
		view_business_card,
		circle_recently_visited,
		InformationBusinessCardList
	} from '@/common/http/api.js'
	import HeaderBar from "@/components/header/header.vue";
	import identityAvatarVue from '@/components/identity-avatar/identity-avatar.vue';
	export default {
		components: {
			Search,
			HeaderBar,
			identityAvatarVue
		},
		data() {
			return {
				circle_host: 0,
				top: 0,
				height: 0,
				width: 0,
				right: 0,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				keyword: '',
				height: 0,
				//分页
				params: {
					page: 1,
					visits: 'desc',
					nickname: '',
					circle_id: 0 //0 全部
				},
				isList: true,
				list: [],
				//交换名片
				changeCardList: {
					count: 0,
					list: []
				},
				opacity: 0,
				searchInfo: '',
				form: '',
				circleType: 1,
				isend: false,
				tab: [],
				cardList: [],
				total: 0
			}
		},
		onReady() {
			// 获取胶囊按钮的位置信息
			let menuButtonRect = wx.getMenuButtonBoundingClientRect();
			console.log("Menu button rect:", menuButtonRect);

			this.top = menuButtonRect.top

			this.height = menuButtonRect.height

			this.width = menuButtonRect.width

			this.right = 375 - menuButtonRect.right
		},
		onLoad() {

			let token = uni.getStorageSync('token')
			if (!token) return
			//this.reload()

			InformationScreen({
				type: 1,
				circle_id: 0
			}).then(res => {
				this.searchInfo = res.data
			})
		},
		onShow() {
			this.$store.dispatch('updateMessageCount')
			//获取是否有人加好友
			this.getData()
			this.getCircleList()

			let token = uni.getStorageSync('token')
			if (!token) return

			//圈子名片
			InformationBusinessCardList().then(res => {
				this.cardList = res.data
			})
		},
		computed: {
			circleName() {
				if (this.params.circle_id === 0) {
					return '名片夹' + '（' + this.total + '）'
				}
				if (this.tab.some(i => i.id === this.params.circle_id)) {
					return this.tab.find(i => i.id === this.params.circle_id).name + '（' + this.total + '）'
				}
			}
		},
		methods: {
			xufei() {
				uni.navigateTo({
					url: "/pagesA/beforeCreateCircle/beforeCreateCircle?cid=" + this.params.circle_id + '&ctype=' +
						this.circleType
				})
			},
			toFindInterest() {
				if (this.cardList.length === 0) {
					uni.navigateTo({
						url: '/pages/index/addMyCard'
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/findInterest/findInterest'
					})
				}
			},
			setTab(id, it) {
				// if(id > 0) {
				// 	view_business_card({circle_id: id, user_id: it.id})
				// }
				this.isend = false
				this.circle_host = 0
				if (it) {
					this.isend = it.isend
					this.circle_host = it.circle_host
					this.circleType=it.circleType
				}
				circle_recently_visited({
					circle_id: id,
					type: 5
				})
				this.params.identity = ''

				this.params.PositioningCity = ''
				this.params.circle_id = id
				if (it && it.isend) {
					return
				}
				InformationScreen({
					type: 1,
					circle_id: id
				}).then(res => {
					this.searchInfo = res.data
				})
				this.reload()
			},
			getCircleList() {
				user_circle({
					type: 5
				}).then(res => {

					this.isend = false
					res.data.forEach(item => {
						item.isend = false
						let nowdate = new Date()
						let target = new Date(item.end_time)
						if (item.end_time && target < nowdate) {
							item.isend = true
							if (this.params.circle_id == item.id) {
								this.isend = true
								this.circle_host = item.circle_host
							}
						}

					})

					this.tab = res.data
				})
			},
			toCircle(it) {
				// view_business_card({circle_id: it.circle_id_arr, user_id: it.id})
				uni.navigateTo({
					url: '/pages/circle/other?userId=' + it.id + '&circleId=' + it.circle_id_arr
				})
			},
			toIndex(it) {

				if (it.whether_update == 1) {
					whether_update_read({
						user_id: it.id
					})
				}


				uni.navigateTo({
					url: '/pages/index/other?isBackHome=2&shareId=' + it.b_id
				})
				// if(this.params.circle_id > 0) {
				// 	uni.navigateTo({
				// 		url: '/pages/index/other?shareId=' + it.b_id
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: '/pages/index/other?userId=' + it.userId
				// 	})
				// }

			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)

			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				this.loading = true

				InformationAllBusinessCards(params).then(res => {

					this.total = res.total ?? 0
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			reload() {
				this.$refs.paging.reload();
			},
			getData() {
	
				let token = uni.getStorageSync('token')
				if (!token) return;

				InformationAllExchangeRequest().then(res => {
					this.changeCardList = res.data
					console.log('this.changeCardList', this.changeCardList.list.length)
					this.reload()
				})
			},

			sendMessage(id) {
				uni.navigateTo({
					url: '/pagesA/wxChat/wxChat?id=' + id + '&circle_id=' + this.params.circle_id
				})
			},
			open() {
				let token = uni.getStorageSync('token')
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$refs.SearchRef.show()
			},
			agree(id) {
				uni.showLoading()
				InformationAllBusinessCardsAgree({
					id
				}).then(res => {
					this.getData()
					this.reload()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			//2删除 1 拒绝 名片
			delCard(id, type) {
				console.log('delCard', id)
				uni.showModal({
					title: '',
					content: `请确认是否${type == 2 ? '删除' : '拒绝'}？`,
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#e4393c',
					success: res => {
						if (res.confirm) {
							uni.showLoading()
							InformationAllBusinessCardsDel({
								id,
								type: type == 2 ? 1 : 2
							}).then(res => {
								uni.hideLoading()
								this.getData()
								this.reload()
							}).finally(err => {
								uni.hideLoading()
							})
						}
					}
				});

			},
			swipeDction(e) {
				console.log('e', e)
				this.delCard(e.name, 2)
			},
			toDetail() {
				uni.navigateTo({
					url: '/pagesC/card/detail'
				})
			},
			submit(params) {
				console.log('params', params)
				//let p = JSON.parse(JSON.stringify(params))
				let data = {
					...this.params
				}
				for (let i in params) {
					if (params[i] != '') {
						data[i] = params[i]
					} else {
						data[i] = undefined
					}
				}
				let d = JSON.parse(JSON.stringify(data))
				this.params = {
					...d
				}
				this.reload()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xfbox {
		margin: 0 auto;
		margin-top: 60rpx;
		width: 360rpx;
	}
	
	.message {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;

		.message-list {
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 19rpx 16rpx;
			margin-bottom: 24rpx;

			.message-list-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 50rpx;

				.message-list-header-l {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #2B2B2B;

					image {
						width: 44rpx;
						height: 44rpx;
						margin-right: 6rpx;
					}
				}

				.message-list-header-r {
					display: flex;
					align-items: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;

					.text {

						margin-left: 13rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
						margin-left: 8rpx;
					}
				}
			}

			.message-list-content {
				display: flex;

				.message-list-content-avatar {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
					border-radius: 50%;
				}

				.message-list-content-r {
					display: flex;
					flex: 1;
					min-width: 0;

					.message-list-content-r-tx {
						flex: 1;
						min-width: 0;

						.message-list-content-r-name {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #211C1E;
						}

						.message-list-content-r-tx-subTitle {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							margin-bottom: 16rpx;
						}

						.message-list-content-r-tx-address {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							width: 100%;
							margin-right: 10rpx;
						}
					}

					.message-list-content-r-btns {
						width: 130rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.message-list-content-r-btns-agree {
							width: 130rpx;
							height: 55rpx;
							background: #12B475;
							border-radius: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-bottom: 20rpx;
						}

						.message-list-content-r-btns-rej {
							width: 131rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 1px solid #C8C8C8;
							display: flex;
							align-items: center;
							justify-content: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #211C1E;
						}
					}
				}
			}

			.message-list-comment {
				height: 170rpx;
				width: 100%;
				position: relative;

				&>image {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
				}

				&>view {
					width: calc(100% - 30rpx);
					position: absolute;
					top: 46rpx;
					left: 15rpx;
					z-index: 3;

					.message-list-comment-item {

						display: flex;
						justify-content: space-between;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
					}

					.message-list-comment-r {
						justify-content: unset;
						border-bottom: 1rpx solid #E5E5E5;
						padding-bottom: 18rpx;
						margin-bottom: 18rpx;
					}
				}
			}
		}
	}

	.title {
		width: 690rpx;
		margin-left: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #211C1E;
		margin-bottom: 34rpx;
	}

	.list {
		width: 100%;
		// border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;

		.gap {
			width: 100%;
			height: 10rpx;
			background-color: #eee;
		}

		.list-item {
			width: 100%;
			position: relative;
			z-index: 100;

			.update {
				position: absolute;
				// right: 0;
				z-index: 99;
				left: 0;
				top: 0;
				width: 100rpx;
				height: 40rpx;
				font-size: 22rpx;
				// font-weight: bold;
				color: #fff;
				box-sizing: border-box;
				padding-left: 10rpx;
				display: flex;
				align-items: center;
				border-radius: 10rpx 0 60rpx 0;
				background: rgb(255, 70, 54);
			}

			.list_item {
				box-sizing: $uni-bg-color;
				padding: 39rpx 49rpx;
				display: flex;
				align-items: center;

				.list_item-img {
					width: 100rpx;
					height: 100rpx;
					margin-right: 13rpx;
				}

				.list_item-content {
					width: 350rpx;

					.list_item-content-h {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 16rpx;
						display: flex;

						.list_item-content-h-name {
							// display: flex;
							// align-items: center;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							flex: 1;
							width: fit-content;
							word-break: break-all;

							image {
								margin-left: 14rpx;
								width: 26rpx;
								height: 26rpx;

							}
						}

						.list_item-content-h-address {
							display: flex;
							align-items: center;
							font-family: PingFang SC;
							font-weight: 300;
							font-size: 24rpx;
							color: #7A7A7A;
							width: fit-content;

							image {
								margin-right: 10rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.list_item-content-tq {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						align-items: center;
						color: #666666;
						margin-bottom: 17rpx;

						.list_item-content-bg {
							position: relative;
							height: 48rpx;
						}

						image {
							position: absolute;
							width: 48rpx;
							border-radius: 24rpx;
							border: 1rpx solid #edeced;

						}
					}

					.list_item-content-subTitle {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						display: flex;
						align-items: center;
						margin-bottom: 17rpx;

						text {
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #12B475;
							margin-left: 36rpx;
						}
					}

					.list_item-content-address {
						min-width: 0;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;

						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}

						//height: 23rpx;
					}
				}

				.list_item-rig {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					&>view {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #131313;
						position: relative;

						image {
							margin-bottom: 12rpx;
							width: 38rpx;
							height: 38rpx;
						}

						.layout-item-nums {
							position: absolute;
							left: 20rpx;
							top: -12rpx;
							transform: scale(0.8);
						}
					}
				}
			}
		}
	}

	// 复制
	page {
		background: #fff;
	}

	.scroll-Y {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		//background: #fff;
		// background: linear-gradient(to bottom, #b4f0df 0%, #f6f7f8 473rpx, #f6f7f8 473rpx, #f6f7f8 100%);
	}

	.box {
		// min-height: 100vh;
		//background: #292639!important;
	}

	.master {
		background-color: #242232;
		border-radius: 20rpx;
		padding: 0 10rpx;
		font-size: 16rpx;
		// max-width: 150rpx;
		width: fit-content;
		height: 50rpx;
		border-radius: 20rpx;

		&-avatar {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}

		&-tag {
			height: 30rpx;
			background-color: #e9e9e9;
			padding: 5rpx 10rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;

		}
	}

	.apply {
		font-size: 26rpx;
		padding: 5rpx 30rpx;
		background-color: #91c29b;
		border-radius: 20rpx;
		color: #fff;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
	}

	.triangle {
		width: 0;
		height: 0;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 15rpx solid #242232;
		/* 控制三角形高度和颜色 */

		&.active {
			border-bottom-color: #fff;
		}
	}

	.circle-item {
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.circle-img {
			width: 90rpx;
			height: 90rpx;
			background-color: #e9e9e9;
			border-radius: 20rpx;
		}

		.circle-text {
			width: 100rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}



	.circle-item:first-child {
		margin-left: 20rpx;
	}

	.search-layout {
		width: 100%;
		display: flex;
		align-items: center;

		.search {
			flex: 1;
			margin-right: 20rpx;
		}
	}

	// .search {
	// 	background-color: #fff;
	// 	border-radius: 20rpx;
	// 	padding-left: 20rpx;
	// 	display: flex;

	// 	.search-input {
	// 		flex: 1;
	// 		min-width: 0;
	// 		height: 100%;
	// 		display: flex;
	// 		align-items: center;
	// 		padding-right: 10rpx;
	// 	}
	// 	.search-btn {
	// 		color: #333;
	// 		// border-left: 1px solid #7e7b8c;
	// 		font-size: 24rpx;
	// 		width: 70rpx;
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		width: 100rpx;
	// 		position: relative;
	// 	}
	// 	.search-btn::before {
	// 		width: 1px;
	// 		height: 70%;
	// 		content: "";
	// 		position: absolute;
	// 		left: 0;
	// 		top: 50%;
	// 		transform: translateY(-50%);
	// 		margin: auto;
	// 		background: #7e7b8c;
	// 	}
	// }

	// .tab-top {

	// 	height: 20rpx;
	// }
	.test {
		background: #292639;
		height: 180rpx;
	}

	.tab-box {
		z-index: 99;
		position: sticky;
		top: 0;
		width: 100%;
		height: 30rpx;
		background: #292639;
	}

	.tab {
		padding: 20rpx;
		// padding-top: 0;
		background: #fff;
		overflow: hidden;

		background: #fff;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		width: 100%;
		//height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;

		&-item {
			font-size: 32rpx;
			color: #bdbdbd;
			margin-right: 20rpx;

			&.active {
				color: #121212;
				border-bottom: 1px solid #121212;
			}
		}

		.tab-r {
			width: fit-content;
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
			margin: auto;
		}
	}



	image {
		width: 100%;
		height: 100%;
	}

	.barTitle {
		width: 100%;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #292639;
		//background: red;
	}


	.barTitle {
		position: relative;

		//box-shadow: 0px 10px 10px #666666;
		.icon {
			position: absolute;
			left: 30rpx;
			top: 50%;
			transform: rotateY(-50%);
			margin: auto;
		}
	}

	.circleTabs {
		overflow-x: scroll;
	}

	.search-box {
		background: #292639;
	}

	.circle-item {
		box-sizing: border-box;
	}


	.circle-item-add {
		display: flex;
		flex-direction: column;
		align-items: center;


		.circle-text {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			margin-bottom: 10rpx;
		}
	}

	.search {
		width: 690rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;

		.search-input {
			width: 553rpx;
			height: 70rpx;
			background: #33303f;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 20rpx 27rpx;
			margin-right: 25rpx;

			.search-input-icon {
				width: 32rpx;
				height: 32rpx;

			}

			input {
				flex: 1;
				min-width: 0;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #fff;
				margin-left: 11rpx;
			}

			.search-input-ac {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7e7b8c;
			}
		}

		.search-rig {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 9rpx;
			}

			.search-rig-s {
				width: 52rpx;
				height: 25rpx;
			}

		}
	}

	.circle-item-ac {
		.circle-item-add-icon {
			background-color: #F4DEBF;
			border-radius: 20rpx;
		}

	}

	.circle-item-add-icon {
		width: 102rpx;
		height: 102rpx;
		border-radius: 20rpx;
		// background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 6rpx;

		&>view,
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx !important;
		}
	}

	.circle-item-add-icon-item {
		background-color: #33303f;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>